<article>
  <p>使用方法一：通过data属性可以很容易的控制轮播的定位。 <code>data-slide</code> 可以接受控制播放位置的
  <code>prev</code> 或 <code>next</code> 关键字。另外，还可以通过 <code>data-slide-to</code>
  传递以 <code>0</code> 开始的幻灯片下标。 <code>data-ride=&quot;carousel&quot;</code>
  属性用来标记在页面加载之后即开始启动的轮播组件。</p>
  <p>使用方法二：通过js手动启动轮播组件： <code>$(&#39;.carousel&#39;).carousel()</code></p>
</article>

<section>
  <header><h3>基本类型</h3></header>
  <article>
    <div class="example no-padding">
      <div id="carouselExample1" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExample1" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExample1" data-slide-to="1" class=""></li>
          <li data-target="#carouselExample1" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner">
          <div class="item active">
            <img alt="First slide" src="docs/img/slide1.jpg">
            <div class="carousel-caption">
              <h3>我是第一张幻灯片</h3>
              <p>:)</p>
            </div>
          </div>
          <div class="item">
            <img alt="Second slide" src="docs/img/slide2.jpg">
            <div class="carousel-caption">
              <h3>我是第二张幻灯片</h3>
              <p>0.0</p>
            </div>
          </div>
          <div class="item">
            <img alt="Third slide" src="docs/img/slide3.jpg">
            <div class="carousel-caption">
              <h3>我是第三张幻灯片</h3>
              <p>最后一张咯~</p>
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#carouselExample1" data-slide="prev">
          <span class="icon icon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carouselExample1" data-slide="next">
          <span class="icon icon-chevron-right"></span>
        </a>
      </div>
    </div>
    <pre><code>&lt;div id=&quot;myNiceCarousel&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
  &lt;!-- &#x5706;&#x70b9;&#x6307;&#x793a;&#x5668; --&gt;
  &lt;ol class=&quot;carousel-indicators&quot;&gt;
    &lt;li data-target=&quot;#myNiceCarousel&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
    &lt;li data-target=&quot;#myNiceCarousel&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
    &lt;li data-target=&quot;#myNiceCarousel&quot; data-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
  &lt;/ol&gt;

  &lt;!-- &#x8f6e;&#x64ad;&#x9879;&#x76ee; --&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;item active&quot;&gt;
      &lt;img alt=&quot;First slide&quot; src=&quot;http://zui.sexy/docs/img/slide1.jpg&quot;&gt;
      &lt;div class=&quot;carousel-caption&quot;&gt;
        &lt;h3&gt;&#x6211;&#x662f;&#x7b2c;&#x4e00;&#x5f20;&#x5e7b;&#x706f;&#x7247;&lt;/h3&gt;
        &lt;p&gt;:)&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;item&quot;&gt;
      &lt;img alt=&quot;Second slide&quot; src=&quot;http://zui.sexy/docs/img/slide2.jpg&quot;&gt;
      &lt;div class=&quot;carousel-caption&quot;&gt;
        &lt;h3&gt;&#x6211;&#x662f;&#x7b2c;&#x4e8c;&#x5f20;&#x5e7b;&#x706f;&#x7247;&lt;/h3&gt;
        &lt;p&gt;0.0&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;item&quot;&gt;
      &lt;img alt=&quot;Third slide&quot; src=&quot;http://zui.sexy/docs/img/slide3.jpg&quot;&gt;
      &lt;div class=&quot;carousel-caption&quot;&gt;
        &lt;h3&gt;&#x6211;&#x662f;&#x7b2c;&#x4e09;&#x5f20;&#x5e7b;&#x706f;&#x7247;&lt;/h3&gt;
        &lt;p&gt;&#x6700;&#x540e;&#x4e00;&#x5f20;&#x54af;~&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- &#x9879;&#x76ee;&#x5207;&#x6362;&#x6309;&#x94ae; --&gt;
  &lt;a class=&quot;left carousel-control&quot; href=&quot;#myNiceCarousel&quot; data-slide=&quot;prev&quot;&gt;
    &lt;span class=&quot;icon icon-chevron-left&quot;&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class=&quot;right carousel-control&quot; href=&quot;#myNiceCarousel&quot; data-slide=&quot;next&quot;&gt;
    &lt;span class=&quot;icon icon-chevron-right&quot;&gt;&lt;/span&gt;
  &lt;/a&gt;
&lt;/div&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>参数</h3></header>
  <article>
    <p>可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到 <code>data-</code> 之后，例如 <code>data-interval=&quot;&quot;</code> 。</p>
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">名称</th>
          <th style="width: 50px;">类型</th>
          <th style="width: 50px;">默认值</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>interval</td>
          <td>number</td>
          <td>5000</td>
          <td>幻灯片轮换的等待时间。如果为false，轮播将不会自动开始循环。</td>
        </tr>
        <tr>
          <td>pause</td>
          <td>string</td>
          <td>"hover"</td>
          <td>鼠标停留在幻灯片区域即暂停轮播，鼠标离开即启动轮播。</td>
        </tr>
        <tr>
          <td>wrap</td>
          <td>boolean</td>
          <td>true</td>
          <td>轮播是否持续循环。</td>
        </tr>
      </tbody>
    </table>
  </article>
</section>

<section>
  <header><h3>方法和事件</h3></header>
  <article>
    <p>可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到 <code>data-</code> 之后，例如 <code>data-interval=&quot;&quot;</code> 。</p>
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">方法</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code>.carousel(options)</code></td>
          <td>初始化轮播组件，接受一个可选的object类型的options参数，并开始幻灯片循环。</td>
        </tr>
        <tr>
          <td><code>.carousel(&#39;cycle&#39;)</code></td>
          <td>从左到右循环各帧。</td>
        </tr>
        <tr>
          <td><code>.carousel(&#39;pause&#39;)</code></td>
          <td>停止轮播。</td>
        </tr>
        <tr>
          <td><code>.carousel(number)</code></td>
          <td>将轮播定位到指定的帧上（帧下标以0开始，类似数组）。</td>
        </tr>
        <tr>
          <td><code>.carousel(&#39;pre&#39;)</code></td>
          <td>返回上一帧。</td>
        </tr>
        <tr>
          <td><code>.carousel(&#39;next&#39;)</code></td>
          <td>转到下一帧。</td>
        </tr>
      </tbody>
    </table>
    <h4>用于监听的事件</h4>
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 150px;">事件类型</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>slide.zui.carousel</td>
          <td>此事件在 <code>slide</code> 方法被调用之后立即出发。</td>
        </tr>
        <tr>
          <td>slide.zui.carousel</td>
          <td>当所有幻灯片播放完之后被触发。</td>
        </tr>
        <tr>
          <td colspan="2"><code class=
          "language-js">$(&#39;#myCarousel&#39;).on(&#39;slide.zui.carousel&#39;,
          function() {// do something…})</code></td>
        </tr>
      </tbody>
    </table>
  </article>
</section>

<article>
  <div class="alert with-icon">
    <i class="icon-smile"></i>
    <div class="content">
      <p>非常感谢 <a class="alert-link" href="http://weibo.com/snowinfish" target="_blank">@snowinfish</a> 为本章节提供演示所用的全部图片。</p>
      <p class="margin-zero">图片仅供 ZUI 演示使用，未经作者授权，不得用作他用。</p>
    </div>
  </div>
</article>
